<!---->
<template>
  <div class="personal">
    <div class="pl">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="vertical"
        @select="handleSelect"
      >
        <el-menu-item index="1">基本信息</el-menu-item>
        <el-menu-item index="2">修改密码</el-menu-item>
      </el-menu>
      <div class="line"></div>
    </div>
    <div class="pr" v-if="activeIndex=='1'">
      <!-- <el-descriptions title="用户信息" :column=1>
        <template slot="extra">
          <el-button type="primary" size="small" @click="handleEdit">编辑</el-button>
        </template>
        <el-descriptions-item label="用户昵称"><el-input v-model="user.name" v-if="edit"></el-input>{{edit==0?user.name:''}}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{user.userId}}</el-descriptions-item>
        <el-descriptions-item label="用户邮箱"><el-input v-model="user.email" v-if="edit"></el-input>{{edit==0?user.email:''}}</el-descriptions-item>
      </el-descriptions> -->
      <div class="title">
        <div class="hl">用户信息</div>
        <div class="hr">
          <el-button type="primary" size="small" @click="handleEdit"
            >编辑</el-button
          >
        </div>
      </div>
      <hr />
      <div class="pm">
        <div class="line">
          <div class="ll">用户昵称</div>
          <div class="lr">
            <el-input v-model="user.name" v-if="edit"></el-input
            >{{ edit == 0 ? user.name : "" }}
          </div>
        </div>
        <div class="line">
          <div class="ll">用户ID</div>
          <div class="lr">{{ user.userId }}</div>
        </div>
        <div class="line">
          <div class="ll">用户邮箱</div>
          <div class="lr">
            <el-input v-model="user.email" v-if="edit"></el-input
            >{{ edit == 0 ? user.email : "" }}
          </div>
        </div>
      </div>
    </div>
    <div class="pr" v-if="activeIndex=='2'">
      <!-- <el-descriptions title="用户信息" :column=1>
        <template slot="extra">
          <el-button type="primary" size="small" @click="handleEdit">编辑</el-button>
        </template>
        <el-descriptions-item label="用户昵称"><el-input v-model="user.name" v-if="edit"></el-input>{{edit==0?user.name:''}}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{user.userId}}</el-descriptions-item>
        <el-descriptions-item label="用户邮箱"><el-input v-model="user.email" v-if="edit"></el-input>{{edit==0?user.email:''}}</el-descriptions-item>
      </el-descriptions> -->
      <div class="title">
        <div class="hl">修改密码</div>
      </div>
      <hr />
      <div class="pm">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              placeholder="请输入原密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';

export default {
  //import引入的组件需要注入对象中才能用
  components: {},
  data() {
      var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入原密码"));
      } else {
        if (this.ruleForm.newPass !== "") {
          this.$refs.ruleForm.validateField("newPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        callback();
      }
    };
    return {
        ruleForm: {
        newPass: "",
      },
      activeIndex: "1",
      edit: 0,
      user: {
        name: "103宿舍",
        userId: "103",
        email: "103@103.com",
      },
      rules: {
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        newPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.activeIndex = key
    },
    handleEdit() {
      this.edit = 1;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.el-menu {
  height: 100%;
  text-align: center;
}
.personal {
  margin: 20px auto;
  display: flex;
  width: 1000px;
  border: 1px solid #ccc;
  height: 100%;
  .pl {
    width: 20%;
  }
  .pr {
    flex: 1;
    padding: 20px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .hl {
        color: #000;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .pm {
      padding: 24px 40px;
      background: #f8f8f8;
      .line {
        display: flex;
        line-height: 50px;
        font-size: 18px;
        .ll {
          width: 100px;
          text-align: justify;
          vertical-align: top;
          text-align-last: justify;
        }
        .lr {
          margin-left: 30px;
          text-align: left;
        }
      }
    }
  }
}
</style>